<template>
  <div class="log-container">
    <h1 class="page-title">操作日志</h1>

    <!-- 搜索条件 -->
    <div class="search-bar">
      <el-form :model="searchParams" :inline="true">
        <el-form-item label="用户姓名">
          <el-input
            v-model="searchParams.username"
            placeholder="请输入用户姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="searchParams.phone"
            placeholder="请输入手机号码"
            clearable
          />
        </el-form-item>
        <el-form-item label="操作内容">
          <el-input
            v-model="searchParams.action"
            placeholder="请输入操作内容"
            clearable
          />
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 日志列表 -->
    <el-table
      :data="logList"
      style="width: 100%; margin-top: 20px"
      v-loading="loading"
      border
    >
      > <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="username" label="用户姓名" min-width="80" />
      <el-table-column prop="phone" label="手机号码" min-width="120" />
      <el-table-column prop="department" label="所属单位" min-width="120" />
      <el-table-column
        prop="actionDetail"
        label="操作内容"
        min-width="250"
        show-overflow-tooltip
      />
      <el-table-column
        prop="operateTime"
        label="操作时间"
        width="180"
        sortable
      />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:page-size="searchParams.pageSize"
        v-model:current-page="searchParams.page"
        :page-sizes="[10, 20,30, 50, 100]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { logAPI } from '@/api/index.js'
// 数据状态
const loading = ref(false)
const logList = ref([])
const total = ref(0)
const dateRange = ref([])

// 搜索参数
const searchParams = reactive({
  page: 1,
  pageSize: 10,
  username: '',
  phone: '',
  action: '',
  startDate: '',
  endDate: '',
})

// 获取日志列表
const fetchLogList = async () => {
  loading.value = true
  try {
    const response = await logAPI.getList(searchParams)
    if (response.code === 200) {
      logList.value = response.data.list
      total.value = response.data.total
    }
  } catch (error) {
    console.error('获取日志列表失败:', error)
    ElMessage.error('获取日志列表失败')
  } finally {
    loading.value = false
  }
}

// 页码改变
const handlePageChange = (page) => {
  searchParams.page = page
  fetchLogList()
}

// 每页数量改变
const handleSizeChange = (size) => {
  searchParams.pageSize = size
  searchParams.page = 1 // 重置到第一页
  fetchLogList()
}

// 日期范围改变
const handleDateChange = (dates) => {
  if (dates && dates.length === 2) {
    searchParams.startDate = dates[0]
    searchParams.endDate = dates[1]
  } else {
    searchParams.startDate = ''
    searchParams.endDate = ''
  }
}

// 搜索
const handleSearch = () => {
  searchParams.page = 1
  fetchLogList()
}

// 重置
const handleReset = () => {
  Object.assign(searchParams, {
    page: 1,
    pageSize: 10,
    username: '',
    phone: '',
    action: '',
    startDate: '',
    endDate: '',
  })
  dateRange.value = []
  fetchLogList()
}

onMounted(() => {
  fetchLogList()
})
</script>

<style scoped>
.log-container {
  padding: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;

}

.page-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
